<template>
	<view class="prompt-box" v-if="isHidden==true">
		<view class="prompt-content">
			
			<view class="item">
				<view class="t-title">维修组</view>
				<input  class="t-content t-border" placeholder="请输入维修组" v-model="maintenancePerson"/>
			</view>
			<view class="item">
				<view class="t-title">维修人</view>
				<input  class="t-content t-border" placeholder="请输入维修人" v-model="repairGroup"/>
			</view>
			
			<view class="item">
				<button class="v-button" style="background-color:#2069D4 ;" @click="query()">查询</button>
				<button class="v-button" style="background-color: #86CD6A;" @click="_confirm">确定</button>
			</view>
			<scroll-view class="table" scroll-x="true">
			    <!-- 表头 -->
			    <view class="tr">
			        <view class="th"></view>
			        <view class="th">序号</view>
			        <view class="th">维修组</view>
			        <view class="th">维修人</view>
			    </view>
			    <!-- 表格内容 -->
			    <view class="tr" v-for="(item , index) in listDataAll" :key="index">
			        <view class="td"><checkbox :checked="item.checked" @click="checkedItem(item)"></checkbox> </view>
					<view class="td">{{index+1}}</view>
			        <view class="td">{{item.type}}</view>
			        <view class="td">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				maintenancePerson:"",
				repairGroup:"",
				isHidden: false,
				listDataAll:[]
			};
		},
		props:{
			dialogVisible:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			dialogVisible(val) {
			  if (val === false) {
			  } else {
				this.show()
			  }
			}
		},
		methods: {
			hide () {
			  this.isHidden=false;
			},
			show(e) {
			  this.isHidden=true;
				if(e!=null&&e!=undefined&&e!=""){
					this.text = e;
				}
			},
			checkedItem(item){
				item.checked=!item.checked
			},
			query(){
				console.log(this.maintenancePerson)
				console.log(this.repairGroup)
				this.listDataAll=[{"checked":false,"type":"机械","name":"张三"}]
			},
			
			_confirm () {
			  this.hide()
			  
			  let listData=[]
			  this.listDataAll.forEach((item) => {
			      if(item.checked){
					  listData.push(item)
				  }
			  })
			  this.$emit('onConfirm', listData);
			}
		}
	}
</script>
 
<style>
/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 100%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.5);
}
 
.prompt-content {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 700rpx;
  max-width: 700rpx;
  border-radius: 8rpx;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}

.item {
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-flow: row;
		align-items: center;
	}

	.t-title {
		min-width: 80px;
		font-size: 16px;
		margin-left: 16px;
		text-align: justify;
	}

	.t-content {
		width: 100%;
		margin-left: 16px;
		margin-right: 16px;
		padding: 3px;
	}
	.t-border{
		border: 1rpx solid #cccccc;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.context {
		color: #000;
		flex: 1;
		word-break: break-all;
	}
	.v-button{
		height: 30px;
		line-height: 30px;
		color: #fff;
	}
	
	
	.table {
	    display: flex;
	    flex-direction: column;     /* 排列形式: 向下 */
	    margin-bottom: 50px;
	}
	  
	.tr {
	    display: flex;
	    flex-direction: row;
	}
	
	 .th, .td{ /* 公有的属性 */
		min-width: 25%;
		width: 25%;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;            /* 自动换行 */
	    text-align: center;         /* 文本居中 */
	    justify-content:center;     /* 主轴居中 */
	    align-items: center;        /* 交叉轴居中 */
	    border-top: 1px solid #dadada;      /* 单元格上线框 */
	    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
	    border-left: 1px solid #dadada;     /* 单元格左线框 */
	    border-right: 1px solid #dadada;    /* 单元格右线框 */
	}
	
	.th {
	    font-weight: 800;           /* 字体加重 */
	    background-color:#B3CCF4;   /* 背景色 */
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.td{
	    background-color:#fff;   /* 背景色 E6F3F9*/
		padding-top: 2px;
		padding-bottom: 2px;
	}
	
</style>